<template>
  <div class="excel-container">
    <upload-excel :before-upload="beforeUpload" :on-success="onSuccess"></upload-excel>
  </div>
</template>

<script>
import UploadExcel from '@/components/UploadExcel'
import { batchEmployee } from '@/api/employee'
import { getImportData } from '@/utils/excel'
export default {
  name: 'ImportExcel',
  components: {
    UploadExcel
  },
  methods: {
    beforeUpload(file) {
      // 这个函数必须 return 一个布尔值 并且只有 return 出去的是 true 的时候才会执行后续的解析 excel 的操作
      // 如果 reture false，表示校验不通过，不会进行正式的解析操作
      console.log('上传前', file)
      // 文件大小超过 1M 不允许导入
      const isLt1M = file.size / 1024 / 1024 < 1 // 小于1M
      if (isLt1M) {
        return true
      }
      this.$message({
        message: '文件体积不能超过1M',
        type: 'warning'
      })
      return false
    },
    // 接收转换后的数据
    async onSuccess({ header, results }) {
      console.log('表头数据', header);
      console.log('表体数据', results);
      // 中英文对照关系
      const headerRelation = {
        '姓名': 'username',
        '手机号': 'mobile',
        '入职日期': 'timeOfEntry',
        '工号': 'workNumber',
        '聘用形式': 'formOfEmployment',
        '部门': 'departmentName'
      }
      const arr = getImportData(results, headerRelation)
      const res = await batchEmployee(arr)
      // console.log(arr);
      // 提示用户
      this.$message.success(res.message)
    }
  }
}
</script>

<style lang="scss" scoped>
.excel-container{
  padding: 50px;
}
</style>
